<template>
    <div class="log">
        <a-form :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">
            <div>
                <img src="https://img.axureshop.com/0e/a4/ac/0ea4ac0fe33148ab863f5e2758608948/images/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2/u18.png"
                    alt="">
                <h1>智能工地管理系统</h1>
            </div>
            <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入你的用户名!' }]">
                <a-input v-model:value="formState.username" @input="en1" />
                <span class="sp" v-show="spp">用户名有误</span>
            </a-form-item>

            <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入你的密码!' }]">
                <a-input-password v-model:value="formState.password" @input="en2" />
                <span class="sp1" v-show="spp1">密码有误</span>
            </a-form-item>

            <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
                <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" html-type="submit" @click="enter">登录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { useRouter } from "vue-router";
import service from '@/utils/service';
import { ElMessage } from 'element-plus';
import getRoutes from '../../grants/router'
const $router = useRouter();
interface FormState {
    username: string;
    password: string;
    remember: boolean;
}

const formState = reactive<FormState>({
    username: 'admin',
    password: '123456',
    remember: true,
});
const onFinish = (values: any) => {
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};
let reg1 = /^[a-zA-Z0-9_-]{4,16}$/;
let reg2 = /^[a-zA-Z0-9_-]{4,16}$/;
let spp = ref<boolean>(false);
let spp1 = ref<boolean>(false);

const en1 = () => {
    if (reg1.test(formState.username) == false && formState.username != '') {
        spp.value = true;
    } else {
        spp.value = false;
    }
};

const en2 = () => {
    if (reg2.test(formState.password) == false && formState.password != '') {
        spp1.value = true;
    } else {
        spp1.value = false;
    }
};

const enter = () => {
    service({
        url: "/restrictx",
        method: "get",
        // data:formState
        params: {
            username: formState.username,
            password: formState.password
        }
    }).then((res) => {
        console.log(...res.data[0].checkedKeys);

        if (res.data[0].username == formState.username) {

            ElMessage({
                message: "登录成功",
                type: "success"
            });
            //存储当前用户名
            sessionStorage.setItem("username", formState.username);
            //存储当前用户token
            // sessionStorage.setItem("token",res.data.token);
            //存储当前用户的权限
            sessionStorage.setItem("grants", JSON.stringify(res.data[0].checkedKeys))
            getRoutes()
            $router.push("/mpage/dengji")
            // break;
        }


    })

}
</script>

<style scoped>
.log {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: cadetblue;
    opacity: 0.9;
}

.ant-form-horizontal {
    width: 500px;
    height: 500px;
    background-color: whitesmoke;
    z-index: 999;
    position: fixed;
    top: 20%;
    left: 35%;
    transform: translate(-50% -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 15%;
}

.ant-input {
    width: 300px;
}

.ant-input-password {
    width: 300px;
}

.ant-checkbox-wrapper {
    width: 100px;
}

.sp {
    display: block;
    width: 90px;
    height: 15px;
    color: red;
}

.sp1 {
    display: block;
    width: 70px;
    height: 15px;
    color: red;
}
</style>